
<template>
    <div
        :class="['slider-verify  cursor-pointer',{'verify-fail': isFail, 'verify-succ': isSucc}]"
        ref="slider"
    >
        <div class="slider-verify__text text-center">{{text}}</div>
        <div
            ref="btn"
            class="slider-verify__button"
            :style="`left:${disX}px`"
            @mousedown="btnDown"
        >
            <app-icon
                :iconName="isFail?'vcloud-close':'vcloud-Slide-right'"
                className="slider-verify__icon"
            ></app-icon>
        </div>
        <div
            v-if="disX"
            class="slider-verify__shadow"
            :style="{width: disX + 'px'}"
        ></div>

    </div>
</template>

<script>
export default {
    name: "login-slider",
    props: {},
    data: () => ({
        text: "",
        textDefault: "拖动滑块验证",
        textVerify: "验证中...",
        textFail: "失败了，重新试试",
        textSucc: "验证成功",
        accuracy: 1,
        startX: 0,
        disX: 0,
        btnWidth: 0,
        sliderWidth: 0,
        maxX: 0,
        isSucc: false,
        isFail: false,
        isVerifing: false
    }),
    computed: {
        btnStyle() {
            return {
                left: this.disX + "px"
            };
        }
    },
    created() {
        this.reset();
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            let slider = this.$refs.slider;
            let btn = this.$refs.btn;
            let btnWidth = btn.offsetWidth;
            let sliderWidth = slider.offsetWidth;
            this.btnWidth = btnWidth;
            this.sliderWidth = sliderWidth;
            this.maxX = sliderWidth - btnWidth;
        },
        reset() {
            this.startX = 0;
            this.disX = 0;
            this.text = this.textDefault;
            this.isFail = false;
            this.isSucc = false;
        },
        btnDown(e) {
            this.reset();
            let ele = e.target;
            let startX = e.clientX;
            this.startX = startX;
            document.addEventListener("mousemove", this.btnMove, false);
            document.addEventListener("mouseup", this.btnUp, false);
        },
        btnMove(e) {
            let endX = e.clientX;
            let disX = endX - this.startX;
            if (disX < 0) {
                disX = 0;
            }
            if (disX >= this.maxX) {
                disX = this.maxX;
            }
            this.disX = disX;
            e.preventDefault();
        },
        btnUp(e) {
            if (this.disX !== this.maxX) {
                //执行失败的函数
                this.onFail && this.onFail();
            } else {
                //执行成功的函数
                this.onSuccess && this.onSuccess();
            }
            document.removeEventListener("mousemove", this.btnMove, false);
            document.removeEventListener("mouseup", this.btnUp, false);
        },
        onSuccess() {
            setTimeout(() => {
                this.isSucc = true;
                this.text = this.textSucc;
                this.disX = 0;
                this.$emit("onSuccess");
            }, 500);
        },
        onFail() {
            setTimeout(() => {
                this.isFail = true;
                this.disX = 0;
                this.text = this.textFail;
            }, 500);
        }
    }
};
</script>
<style lang="scss" scoped>
.slider-verify {
    width: 100%;
    height: 36px;
    position: relative;
    background-color: #eef3fa;
    margin-bottom: 30px;
    &.verify-fail {
        background-color: #ffeff2;
        .slider-verify__text {
            color: #f56c6c;
        }
        .slider-verify__button {
            background-color: #f56c6c;
        }
    }
    &.verify-succ {
        background-color: #e3f2db;
        .slider-verify__text {
            color: #67c13a;
        }
        .slider-verify__button {
            display: none;
        }
    }
    .slider-verify__text {
        width: 100%;
        height: 100%;
        line-height: 36px;
        color: #507ff8;
        font-size: 16px;
    }
    .slider-verify__button {
        position: absolute;
        top: 0;
        left: 0;
        width: 36px;
        height: 36px;
        background-color: #507ff8;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slider-verify__icon {
        font-size: 14px;
        color: #fff;
    }
    .slider-verify__shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border: 1px solid #507ff8;
        background: rgba(80, 127, 248, 0.2);
    }
}
</style>
